<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<%--    <title>${businessConstant.title}</title>--%>
    <title>宁夏师范大学-财政支付系统</title>
    <link rel="icon" type="image/x-icon" href="<%=path%>/static/image/favicon.ico">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/admin/css/admin.css"/>
    <script type="text/javascript" src="<%=path%>/static/jquery/jquery-3.1.0.js"></script>
    <script src="<%=path%>/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="<%=path%>/static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="<%=path%>/static/siui/jquery/jquery.extend.js"></script>
    <script type="text/javascript" src="<%=path%>/static/template/template-web.js"></script>
    <style>
        .layui-nav * {
            font-size: 16px;
        }

        .m-logo {
            background: url(<%=path%>/static/image/leftlogo.png) center center no-repeat;
            background-size: contain;
        }

        .layui-nav.layui-nav-tree {
            width: 100%;
        }

        .main-layout-side {
            background-color: unset !important;
            background: url(<%=path%>/static/image/menu-back.png) no-repeat;
            background-size: 100% 100%;
        }

        .main-layout-side .layui-nav {
            background: unset !important;
        }

        .layui-nav .layui-nav-item a {
            color: #fff !important;
        }

        #tav-ul a {
            color: #1e9fff !important;
        }
        #gszl-ul a {
            color: #1e9fff !important;
        }
        .main-layout-side .layui-nav-itemed > a{
            background: transparent !important;
        }
    </style>
</head>
<body>
<div class="main-layout" id='main-layout'>
    <!--侧边栏-->
    <div class="main-layout-side">
        <div class="m-logo">
        </div>
        <ul id="menu-ul" class="layui-nav layui-nav-tree lay-accordion" lay-filter="leftNav">

        </ul>
    </div>
    <!--右侧内容-->
    <div class="main-layout-container">
        <!--头部-->
        <div class="main-layout-header">
            <div class="menu-btn" id="hideBtn">
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-shrink-right"></i>
                </a>
            </div>

            <ul id="tav-ul" class="layui-nav" lay-filter="rightNav">
                <li class="layui-nav-item"><a href="javascript:;" data-url="email.html" data-id='4' data-text="邮件系统"><i
                        class="iconfont">&#xe603;</i></a></li>
                <li class="layui-nav-item">
                    <a id="user-info" href="javascript:;" data-url="admin-info.html" data-id='5' data-text="个人信息"></a>
                </li>
                <li class="layui-nav-item"><a href="javascript:flush();">刷新</a></li>
                <li class="layui-nav-item"><a href="javascript:clossAllTab();">全部关闭</a></li>
                <li class="layui-nav-item"><a href="javascript:exit();">退出</a></li>
            </ul>
        </div>
        <!--主体内容-->
        <div class="main-layout-body">
            <!--tab 切换-->
            <div class="layui-tab layui-tab-brief main-layout-tab" lay-filter="tab" lay-allowClose="true">
                <ul class="layui-tab-title">
                    <li class="layui-this welcome">后台主页</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show" style="background: #f5f5f5;">
                        <!--1-->
                        <iframe src="<%=path%>/login/welcome.html" width="100%" height="100%" name="iframe"
                                scrolling="auto" class="iframe" framborder="0"></iframe>
                        <!--1end-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--遮罩-->
    <div class="main-mask">

    </div>
</div>
<script id="menus" type="text/html">
    {{each data menu index}}
    <li class="layui-nav-item  layui-nav-itemed">
        <a href="javascript:;">
            <i class="layui-icon {{menu.icon}}"></i>&nbsp;&nbsp;{{menu.name}}
            <span class="layui-nav-more"></span>
        </a>
        <dl class="layui-nav-child">
            {{if menu.children}}
            {{each menu.children child index}}
            <dd>
                <a href="javascript:;" data-url="<%=path%>{{child.url}}" data-id="{{child.id}}"
                   data-text="{{child.name}}">
                    <span class="l-line"></span>{{child.name}}
                </a>
            </dd>
            {{/each}}
            {{/if}}
        </dl>
    </li>
    {{/each}}
</script>

<script type="text/javascript">
    let scope = {
        link: './welcome.jsp'
    }
</script>

<script>

    let layer = layui.layer;
    let form = layui.form;
    let element = layui.element;
    let $ = layui.jquery;
    let dialog = layui.dialog;
    let hideBtn = $('#hideBtn');
    let mainLayout = $('#main-layout');
    let mainMask = $('.main-mask');
    let ids = [];
    //监听导航点击
    element.on('nav(leftNav)', function(navA) {
        // let navA = $(elem).find('a');
        let id = navA.attr('data-id');
        let url = navA.attr('data-url');
        let text = navA.attr('data-text');
        if(!url){
            return;
        }
        let isActive = $('.main-layout-tab .layui-tab-title').find("li[lay-id=" + id + "]");
        if(isActive.length > 0) {
            //切换到选项卡
            element.tabChange('tab', id);
        } else {
            element.tabAdd('tab', {
                title: text,
                content: '<iframe id="' + id + '" src="' + url + '" name="iframe' + id + '" class="iframe" framborder="0" data-id="' + id + '" scrolling="auto" width="100%"  height="100%"></iframe>',
                id: id
            });
            element.tabChange('tab', id);
            ids.push(id);
        }
        mainLayout.removeClass('hide-side');
    });
    //监听导航点击
    element.on('nav(rightNav)', function(elem) {
        let navA = $(elem).find('a');
        let id = navA.attr('data-id');
        let url = navA.attr('data-url');
        let text = navA.attr('data-text');
        if(!url){
            return;
        }
        let isActive = $('.main-layout-tab .layui-tab-title').find("li[lay-id=" + id + "]");
        if(isActive.length > 0) {
            //切换到选项卡
            element.tabChange('tab', id);
        } else {
            element.tabAdd('tab', {
                title: text,
                content: '<iframe id="' + id + '" src="' + url + '" name="iframe' + id + '" class="iframe" framborder="0" data-id="' + id + '" scrolling="auto" width="100%"  height="100%"></iframe>',
                id: id
            });
            element.tabChange('tab', id);
            ids.push(id);
        }
        mainLayout.removeClass('hide-side');
    });
    //菜单隐藏显示
    hideBtn.on('click', function() {
        if(!mainLayout.hasClass('hide-side')) {
            mainLayout.addClass('hide-side');
        } else {
            mainLayout.removeClass('hide-side');
        }
    });
    //遮罩点击隐藏
    mainMask.on('click', function() {
        mainLayout.removeClass('hide-side');
    })

    $(function() {
        // 设置用户姓名
        $("#user-info").html("${loginUser.name}");
        getMenu();
    })

    function getMenu() {
        d8.loading();
        // 渲染菜单
        $.ajax({
            type: 'post',
            url: '<%=path%>/login/getMenu',
            async: true,
            cache: false,
            success: function (data) {
                d8.cancelLoad();
                if (data.code == 200) {
                    let html = template("menus", data);
                    $("#menu-ul").html(html);
                    element.render();
                } else {
                    d8.tip(data.message);
                }
            }
        })
    }

    function exit() {
        layer.confirm('确认退出吗?', function (index) {
            $.ajax({
                type: 'get',
                url: '<%=path%>/login/exit',
                success: function(rs) {
                    if (rs.code == 200) {
                        window.location.href = '<%=path%>/login/login.html';
                    }
                }
            })
            layer.close(index);
        });
    }

    function clossAllTab() {
        d8.layconfirm('确认关闭全部选项卡吗?', function (index) {
            for (let i = 0; i < ids.length; i ++) {
                element.tabDelete('tab', ids[i]);
            }
        });
    }

    function flush() {
        window.location.reload();
    }

    document.onkeydown = function (e) {
        var code;
        if (!e) {
            var e = window.event;
        }
        if (e.keyCode) {
            code = e.keyCode;
        } else if (e.which) {
            code = e.which;
        }
        //BackSpace 8;
        if (
            (event.keyCode == 8)
            && ((event.srcElement.type != "text" && event.srcElement.type != "textarea" && event.srcElement.type != "password")
                || event.srcElement.readOnly == true
            )
        ) {
            event.keyCode = 0;
            event.returnValue = false;
        }
        return true;
    };
</script>
</body>
</html>